<template>
    <checkbox-group @change="checkboxChange" class="cart-item-specs" :class="{ oneSpec: getAppSet().isOneSpec }">
        <label class="item-left custom-checkbox-box" v-if="isShowCheckBox">
            <checkbox v-show="!getAppSet().isOneSpec" class="checkbox-mark" :value="String(productInfo.ID)"
                :checked="isSelectedFn(selectData)">
            </checkbox>
            <custom-checkbox v-show="!getAppSet().isOneSpec" :isSelect="isSelectedFn(selectData)"></custom-checkbox>
        </label>
        <view class="item-main">
            <view class="specs" v-if="productInfo.V_AttributeNameValue"><text>规格:</text><text class="specs-text">{{
                productInfo.V_AttributeNameValue }}</text></view>
            <view class="price">
                <text class="price-text small">￥</text><text class="price-text">{{ totalPrice() }}</text><text
                    class="unit-text">/{{ productInfo.UnitName }}</text>
            </view>
        </view>
        <view class="item-right">
            <vk-data-input-number-box class="input-number-box" v-model="productInfo.Amount"
                :min="productInfo.MinimumOrder || 1" :max="maxBuyNumCom" :stepFirst="productInfo.MinimumOrder || 1"
                :positive-integer="true" @blur="upNum" @minus="upNum" @plus="upNum"></vk-data-input-number-box>
            <view class="stock-box" v-if="isShowDel">
                <text class="stock-text">库存:{{ productInfo.Stock }}</text>
                <uni-icons class="item-del" type="trash" v-if="isShowDel" @click="del"></uni-icons>
            </view>
        </view>
    </checkbox-group>
</template>

<script>
import { updateCart } from "@/utils/cartUtil.js"
import customCheckbox from "@/components/common/custom-checkbox.vue"
export default {
    components: {
        customCheckbox,
    },
    props: {
        selectData: {
            type: Object,
            default: {},
        },
        isShowCheckBox: {
            type: Boolean,
            default: true,
        },
        isShowDel: {
            type: Boolean,
            default: false,
        },
        productInfo: {
            type: Object,
            default: {},
        },
        selectType: {
            type: [String, Number],
            default: ""
        }
    },
    data() {
        return {
            selectNum: 0,
            stepStrictly: true,
            minBuyNum: 0,
            stepBuyNum: 1,
            selected: false,
        }
    },
    methods: {
        //数量变更
        upNum() {
            let obj = {
                ProductId: this.productInfo.ProductId,
                Amount: this.productInfo.Amount,
                UnitId: this.productInfo.UnitId,
                UnitName: this.productInfo.DefaultUnit,
                skuId: this.productInfo.SkuId,
                ratio: this.productInfo.Ratio,
            }
            if (!this.isShowDel) {
                let param = []
                param.push(obj)
                updateCart(param).then((res) => {
                    // this.$emit("upNum", this.productInfo)
                })
            } else {
                this.$emit("change", this.productInfo)
            }
        },
        //价格
        totalPrice() {
            return this.productInfo.V_FactPrice
        },
        //是否选中
        isSelectedFn(data) {
            let ids = data.ids
            let proIds = data.proIds

            let result = ids.find((item) => {
                return item == String(this.productInfo.ID)
            })
            if (result) {
                return true
            }
            return false
        },
        //选择
        checkboxChange(e) {
            this.$emit("checkboxChange", e, String(this.productInfo.ID))
        },
        //删除
        del() {
            this.$emit("del", this.productInfo)
        },
    },
    computed: {
        maxBuyNumCom() {
            return 9999999999999
        },
    },
}
</script>

<style lang="scss">
.cart-item-specs {
    display: flex;
    flex-direction: row;
    border-bottom: solid 1rpx $uni-bg-color-grey;
    padding: $app-page-padding 0;

    .item-left {
        display: flex;
        align-items: center;
        margin-right: 20rpx;
    }

    .item-main {
        display: flex;
        flex: 1;
        flex-direction: column;
        margin-right: 20rpx;

        .specs {
            margin-bottom: 14rpx;
        }
    }

    .item-right {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        align-items: flex-end;

        .stock-box {
            margin-top: 14rpx;
            display: flex;
            flex-direction: row;
            width: 100%;
            align-items: center;

            .item-del {}

            .stock-text {
                display: flex;
                flex: 1;
            }
        }
    }

    .price {
        font-size: $font-size-20;
        color: $app-color-text-tip;
        display: flex;
        align-items: flex-end;
        margin-top: 4rpx;

        .price-text {
            font-size: $font-size-36;
            margin-right: 4rpx;
        }

        .small {
            font-size: $font-size-24;
            margin-bottom: 6rpx;
            margin-right: 0rpx;
        }

        .unit-text {
            color: $color-gray-3;
            margin-bottom: 6rpx;
            font-size: $font-size-20;
        }
    }
}

.oneSpec {
    padding: 10rpx 0 $app-page-padding;
    border-bottom: none;

    .item-left {
        margin-right: 36rpx;
        width: 34rpx;
        margin-left: 12rpx;
    }
}
</style>
